<template>
    <div class="goods-list-container" @scroll="handle_scroll">
        <van-pull-refresh
            v-model="loading"
            @refresh="get_goods_data"
            success-text="刷新成功"
            ref="inner"
        >
            <van-empty
                v-show="!goods_data.length"
                class="custom-image"
                image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="暂无数据"
            />
            <GoodsCard
                v-for="item in goods_data"
                :key="item.id"
                :goods="item"
                @change_count="handle_count(item, $event)"
            />
            <div v-show="is_bottom" class="bottom">已经到底了</div>
        </van-pull-refresh>
    </div>
</template>

<script>
import { get_goods_list } from "@/api"
import GoodsCard from "@/components/GoodsCard"

export default {
    created() {
        this.get_goods_data()
    },
    components: {
        GoodsCard
    },
    props: ["type", "sort"],
    computed: {
        request_info() {
            return {
                type: this.type,
                page: this.page,
                size: 10,
                sort: this.sort
            }
        }
    },
    data() {
        return {
            goods_data: [],
            loading: false,
            page: 1,
            total: 0,
            is_bottom: false
        }
    },
    methods: {
        handle_count(item, count) {
            item.count = count
            this.$store.commit("set_shopping_cart", item)
        },
        get_goods_data(is_add = false) {
            this.loading = true
            get_goods_list(this.request_info).then((resp) => {
                this.total = resp.total
                const data = resp.list.map((item) => ({
                    ...item,
                    count: this.$store.state.shopping_cart[item.id] || 0
                }))
                if (is_add) {
                    this.goods_data.push(...data)
                } else {
                    this.goods_data = data
                }
                this.loading = false
            })
        },
        handle_scroll(e) {
            if (this.total === this.goods_data.length) {
                if (this.total !== 0) {
                    this.is_bottom = true
                }
                return
            }
            if (this.loading) {
                return
            }
            const scroll_top = e.target.scrollTop,
                outter_height = e.target.offsetHeight,
                inner_height = this.$refs.inner.$el.offsetHeight
            if (scroll_top + outter_height + 30 > inner_height) {
                this.page++
                this.get_goods_data(true)
            }
        }
    },
    watch: {
        type() {
            this.page = 1
            this.total = 0
            this.is_bottom = false
            this.get_goods_data()
        },
        sort() {
            this.page = 1
            this.total = 0
            this.is_bottom = false
            this.get_goods_data()
        }
    }
}
</script>

<style lang="less">
@import url(~@/assets/css/var.less);
.goods-list-container {
    width: 295px;
    height: 450px;
    overflow-y: scroll;
    text-align: left;
    .custom-image .van-empty__image {
        width: 90px;
        height: 90px;
    }
    .bottom {
        color: @secondary;
        font-size: 16px;
        text-align: center;
        margin: 13px 0;
    }
}
</style>
